<template>
	<view class="content">
		<view class="input">
			<textarea v-model="value" placeholder="这一刻的想法" focus="true" maxlength="140" />
			</view>
		<view class="images">
			<view  class="act" v-for="(item,index) in images" :key="index">
				<image class="im" :src="item" mode="aspectFill" @tap="prevImg(index)"></image>
			<view class="close"  @tap="deleteImg(index)">×</view>
			</view>
			<view>
			<image class="im" src="../../static/images/addimg.png"  v-if="images.length<3" @tap="addimg"></image>
			</view>
		</view>
		<view :class="dis" @tap="send()">
			发布
		</view>
	</view>
</template>

<script> 
import {
		mapState,
		mapMutations
	} from 'vuex';
import utils from "../../static/js/utils.js";
	export default {
		data() {
			return {
				value:'',
				images:[
					
				]
			}
		},
		computed:{
			...mapState(['user']),
			dis(){
				if(this.validate()) {
					return "btn";
				}else{
					return "btn dis";
				}
			}
		},
		methods: {
			...mapMutations(['setQuanChange']),
			validate(){
				if(this.value.length==0&&this.images.length==0) {
					return false;
				}
				return true;
			},
			send(){
				if(this.validate()){
					let userId = this.user.id;
					let value = this.value;
					utils.loading("发布中");
					let that = this;
					if(this.images.length==0){
						utils.post("quan/addquan",{
							userId:userId,
							quanDesc:value
						},function(data){
							that.setQuanChange({
								quanChange:true
							});
							utils.successToast("发布成功");
							uni.navigateBack({
								delta: 1,
								animationType:"slide-out-bottom"
							});
						})
					}else if(this.images.length==1) {
						let token = uni.getStorageSync('token')||[];
						let pathurl = utils.baseUrl+"quan/addquan";
						let tmppath = this.images[0];
						//下面是上传到服务器的方法
						uni.uploadFile({
							url: pathurl,
							filePath: tmppath,
							header: {
								token: token
							},
							formData:{
								userId:userId,
								quanDesc:value
							},
							name: 'image',
							success: res => {
								res = res.data;
								res = JSON.parse(res);
								utils.hideLoading();
								if (res.code == 0) {
									that.setQuanChange({
										quanChange:true
									});
									utils.successToast("发布成功");
									uni.navigateBack({
										delta: 1,
										animationType:"slide-out-bottom"
									});
							
								} else {
									utils.errorToast(res.errMsg);
								}
							},
							fail: err => {
								utils.errorToast("网络连接失败");
							},
							complete: () => {}
						});
					}else{
						// #ifdef MP-WEIXIN
							utils.errorToast("微信小程序只支持上传单张图片!");
							return;
						// #endif
						let that = this;
						let imgs = this.images.map((value, index) => {
						    return {
						        name: "img" + index,
						        uri: value
						    }
						})
						let pathurl = utils.baseUrl + "quan/addimg";
						let token = uni.getStorageSync('token')||[];
						uni.uploadFile({
							url: pathurl,
							header: {
								token: token
							},
							formData:{
								userId:userId,
								quanDesc:value
							},
							files:imgs,
							success: res => {
								res = res.data;
								res = JSON.parse(res);
								utils.hideLoading();
								if (res.code == 0) {
									that.setQuanChange({
										quanChange:true
									});
									utils.successToast("发布成功");
									uni.navigateBack({
										delta: 1,
										animationType:"slide-out-bottom"
									});	
								} else {
									utils.errorToast(res.errMsg);
								}
							},
							fail: err => {
								utils.hideLoading();
								console.log(err);
								utils.errorToast("网络连接失败");
							}
						});	
					}
				}
			},
			prevImg(index) {
				uni.previewImage({
					urls: this.images,
					current:this.images[index]
				})
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			deleteImg(index){
				this.images.splice(index,1);
			},
			addimg(){
				if(this.images.length>=3) {
					utils.errorToast("最多能上传3张图片");
				}else{
					let that = this;
					uni.chooseImage({
						count: 3-that.images.length, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album','camera'], //从相册选择
						success: function (res) {
							let imgs = that.images;
							let c = imgs.concat(res.tempFilePaths);
							that.images = c;
						}
					});
				}
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 32upx;
	}
	.input{
		width:92%;
		height: 180upx;
		margin-top: 45upx;
	}
	.input textarea{
		width: 100%;
		height: 180upx;
		font-size: 32upx;
	}
	.images{
		width: 92%;
		height: 180upx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 20upx;
		/* justify-content: space-between; */
	}
	.images .act {
		position: relative;
		height: 220upx;
		width: 220upx;
	}
	.close{
		position: absolute;
		top: 32upx;
		right: 32upx;
		height: 40upx;
		background-color:#000000;
		opacity:0.7;
		text-align:center;
		line-height:40rpx;
		border-radius:40rpx;
		width: 40upx;
		color: #ffffff;
	}
	.images .im {
		height: 190upx;
		width: 190upx;
		margin-top: 30upx;
		border-radius: 4upx;
		margin-right: 15upx;
	}
	.btn{
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		font-size: 32upx;
		text-align: center;
		margin-top: 60upx;
		/* border: 1px solid #2E77ED; */
		color: #ffffff ;
		background-color: #2E77ED;
		position: fixed;
		bottom: 0;
	}
	.dis{
		opacity: 0.4;
	}
</style>
